<!--
 * @Description: poi查询组件
-->
<template>
  <div style="width: 100%;">
    <el-input :placeholder="placeholder" :clearable="clearable" v-model="text" @clear="clearInputHandle" class="poi-input"
      @input="getSearchPoi" @blur="blurHandle" @focus="focusHandle"></el-input>
    <ul class="poi-list" v-show="showPoi">
      <li v-for="(v, i) in pois" :key="i" @click.stop="poiItemClick(v)">
        <img :src="poiImg" class="poi-img">
        <div>
          <span class="address-text">{{ v.name }}</span>
          <span class="area-text">{{ v.province + v.city + v.area }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { getMatchQuery } from "@/components/map/mapTool";
export default {
  props: {
    placeholder: {
      typeof: String,
      default: "请输入关键字：(选定后定位)"
    },
    clearable: {
      typeof: Boolean,
      default: true,
    },
    clearFunc: {
      typeof: Function,
      default: () => {
        return () => { }
      },
    },
    poiSelClick: {
      typeof: Function,
      default: () => {
        return () => { }
      },
    },
    centerCity: {
      typeof: String,
      default: "武汉市"
    }
  },
  setup() {
    const text = ref("")
    const showPoi = ref(false)
    const pois = ref([])
    const poiImg = ""
    let timer = null
    return {
      text, showPoi, pois, poiImg, timer
    };
  },
  components: {},
  computed: {},
  created() { },
  mounted() { },
  methods: {
    debounce(func) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(function () {
        func.call()
      }, 200)
    },
    getSearchPoi() {
      let _this = this
      function doFunc() {
        _this.showPoi = !!_this.text
        if (_this.text) {
          let params = {
            city: _this.centerCity,//城市权重优先
            search: _this.text,
            city_limit: false//是否只搜索一个城市
          }
          getMatchQuery(params).then(res => {
            _this.pois = res.data
          })
        }
      }
      _this.debounce(doFunc);
    },
    clearInputHandle() {
      this.clearFunc.call(this);
      this.showPoi = false
    },
    focusHandle() {
      this.showPoi = true
      if (!this.text) {
        this.pois = [];
      }
    },
    poiItemClick(obj) {
      this.poiSelClick(obj)
      this.showPoi = false
    },
    blurHandle() {
      let _this = this;
      setTimeout(() => {
        _this.showPoi = false
      }, 1000)
    }
  }
}
</script>
<style lang='scss' scoped>
.poi-input {
  width: 100%;
}

.poi-list {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  color: #000;
  font-size: 13px;
  box-sizing: border-box;
  z-index: 10;
  position: absolute;

  li {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 4px 10px;
    cursor: pointer;

    &:last-of-type {
      border: 0;
    }

    &:hover {
      background-color: #cae1ff;
    }
  }
}

.poi-img {
  width: 11px;
  height: 16px;
  margin-right: 8px;
}

.area-text {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}
</style>